extends layout-customer

block head

block content
	h1.page-header= title
	
	h2.sub-header Infos
	
	form(method='post', action='/shopping_list/update')
		input(type='hidden', name='_csrf', value=_csrf)
		input(type='hidden', name='id', value=shoppingList.id)
		table.table.table-striped
			tr
				td Laden
				td
					input.form-control(type='text', name='shop', value=shoppingList.shop_name)
				td= shoppingList.shop_name
			tr
				td Einkäufer
				td
					script(type="application/javascript")
						|function changeBuyerButton(value,name){
						|	console.log("v:"+value+" n:"+name);
						|	document.getElementById('change-buyer').value = value;
						|	document.getElementById('buyer-button-text').textContent = name+" ";
						|};	
					input#change-buyer(type='hidden', name='buyer')
					div.input-group
						div.input-group-btn
							button.btn.btn-default.dropdown-toggle#buyer-button(type='button', data-toggle='dropdown', size='1')
								span#buyer-button-text -- Wähle Käufer --
								span.caret
							ul.dropdown-menu(role='menu')
								each member in members
									li
										a(onclick='changeBuyerButton('+member.id+',"'+member.name+'")' value=member.id)= member.name
									if shoppingList.buyer_id == member.id
										script(type="application/javascript")
											|changeBuyerButton(
											= member.id
											|,"
											= member.name
											|");
				td= shoppingList.buyer_name
			tr
				td Wann?
				td
					span.input-group.input-flex
						input.form-control(type='text', name='shopped_date', value=formatDate(shoppingList.shopped, 'date'))
						input.form-control(type='text', name='shopped_time', value=formatDate(shoppingList.shopped, 'time'))
				td= formatDate(shoppingList.shopped)
			tr
				td Erstellt
				td= 'von ' + shoppingList.creator_name + ' am ' + formatDate(shoppingList.created)
		input.btn.btn-primary(type='submit', value='Ändern')
	
	div
		form(method='post', action='/shopping_list/delete')
			input(type='hidden', name='_csrf', value=_csrf)
			input(type='hidden', name='id', value=shoppingList.id)
			input.btn.btn-danger(type='submit', value='Löschen')
	
	
	h2.sub-header Anteile
	
	table.table.table-striped
		each person in stats
			tr
				td= person.name
				td= formatCurrency(person.total)
		tr
			th Gesamt
			th= formatCurrency(shoppingList.total_price)
	
	h2.sub-header Items
	
	input.hidden(value=shoppingList.id id="shoppingListId")
	input.hidden(id='_csrf', value=_csrf)
	div(ng-app='shopping_list', ng-controller='ShoppingListController as slc')
		table.table.table-striped
			tr(ng-repeat='item in shopping_items')
				td
					a.btn.btn-primary(href='/shopping_item/{{item.id}}')
						i.glyphicon.glyphicon-pencil
				td {{item.name}}
				td {{item.owner_name}}
				td {{item.price | formatCurrency}}
				td
					button.pull-right.btn.btn-danger(ng-click='delete(item.id)')
						span.glyphicon.glyphicon-trash			
			tr							
				form(method='post')
					input(type='hidden', name='_csrf', value=_csrf)
					input(type='hidden', name='shopping_list', value=shoppingList.id)
					input#select-owner(type='hidden', name='owner')
					div.input-group
						td
							div.input-group
								button.btn.btn-success(value='Erstellen' ng-click='insert()')
									span.glyphicon.glyphicon-plus-sign
						td
							input.form-control(type='text', name='name', placeholder='Produktname', ng-model='name')
						td
							div.input-group
								button.btn.btn-default.dropdown-toggle#owner-button(type='button', data-toggle='dropdown', size='1')
									span#owner-button-text -- Wähle Besitzer --
									span &nbsp;
									span.caret
								ul.dropdown-menu.dropdown-menu-form#dropdown-owner(role='menu')
									each member in members
										li
											label.checkbox.dropdown-checkbox
												input(type='checkbox' data-id=member.id value=member.id data-name=member.name)
												=member.name
						td
							input.form-control(type='text', name='price', placeholder='Preis in €, z.B. 12.30', ng-model='price')
						td
						script(type="application/javascript")
							|$('#dropdown-owner input[type=checkbox]').on('click', function(e) {
							|	e.stopPropagation();
							|	updateDropdown();
							|});
							|function updateDropdown(){
							|	var owner = [];
							|	var ids = [];
							|	$('#dropdown-owner input[type=checkbox]:checked').each(function(index,element){
							|		owner.push($(this).attr("data-name"));
							|		ids.push($(this).attr("data-id"));
							|	});
							|	$('#owner-button-text').text(owner.join(", "));
							|	$('#select-owner').val(ids.join("|"));
							|	if(owner.length == 0){
							|		$('#owner-button-text').text("-- Wähle Besitzer --");
							|	}
							|};